<template>
    <div>
        <AddReportDialog ref="AddReportDialogRef" :visible="addReportDialogVisible" :close="closeAddReportDialog"
                         :callback="addReportCallBack"></AddReportDialog>
        <EditReportDialog ref="EditReportDialogRef" :visible="editReportDialogVisible" :close="closeEditReportDialog"
                          :callback="editReportCallBack"></EditReportDialog>
        <Bread title="Sales Report/Fill in Report"/>
        <el-row :gutter="40">
            <el-col :span="16">
                <el-card shadow="never" body-style="height:" height="250px" class="form-card">
                    <div slot="header">
                        <span style="font-weight: bold">Date Duration</span>
                    </div>

                    <el-form ref="elForm"
                             :model="reportForm"
                             :rules="reportRules"
                             size="medium"
                             label-width="100px"
                             label-position="left">
                        <el-row type="flex" justify="start" align="top">
                            <el-col span="10">

                                <el-form-item label="Date" prop="chance_time">

                                    <el-date-picker type="daterange" v-model="reportForm.datetime" format="yyyy-MM-dd"
                                                    value-format="yyyy-MM-dd" :style="{width: '100%'}"
                                                    start-placeholder="Y-M-D"
                                                    end-placeholder="Y-M-D" range-separator="To"
                                                    clearable></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col span="14">
                                <el-form-item size="large" >
                                    <el-button type="primary" icon="el-icon-search" size="medium"
                                               @click="submitSearch()">
                                        Search
                                    </el-button>
                                    <el-button @click="resetSearch()">Reset</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>

                <el-card class="table-card" style="height: 540px">
                    <div slot="header">
                        <span style="font-weight: bold">Fill in Daily Sales Report</span>
                        <el-button size="medium"
                                   style="float: right; " @click="handleAdd">Add
                        </el-button>
                    </div>

                    <el-table
                        :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="chance_id">

                        <el-table-column
                            prop="reportDate"
                            label="Date"
                            sortable
                          >
                        </el-table-column>
                        <el-table-column
                            prop="reportWeek"
                            label="Week"
                          >
                        </el-table-column>
                        <el-table-column
                            prop="reportContent"
                            label="reportContent"
                           >
                        </el-table-column>

                        <el-table-column
                            label="Operate"
                            width="200"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="primary" plain round
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">Edit
                                </el-button>

                                <el-button
                                    type="danger" plain round
                                    size="mini"
                                    @click="handleDelete(scope.$index, scope.row)">Delete
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-card>
            </el-col>
            <el-col :span="8">

                <el-card class="box-card">

                    <div style="text-align: center">
                        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 431.25 364.11" width="406"
                             height="306" class="illustration styles_illustrationTablet__1DWOa">
                            <defs>
                                <linearGradient id="linear-gradient" x1="157.22" y1="256.97" x2="62.67" y2="234.45"
                                                gradientUnits="userSpaceOnUse">
                                    <stop offset="0" stop-opacity="0"></stop>
                                    <stop offset="0.99"></stop>
                                </linearGradient>
                                <linearGradient id="linear-gradient-2" x1="243.21" y1="250.14" x2="305.52" y2="250.14"
                                                xlink:href="#linear-gradient"></linearGradient>
                                <linearGradient id="linear-gradient-3" x1="343.33" y1="-159.82" x2="321.91" y2="231.35"
                                                gradientUnits="userSpaceOnUse">
                                    <stop offset="0.02" stop-color="#fff" stop-opacity="0"></stop>
                                    <stop offset="0.14" stop-color="#fff" stop-opacity="0.06"></stop>
                                    <stop offset="0.32" stop-color="#fff" stop-opacity="0.39"></stop>
                                    <stop offset="0.68" stop-color="#fff" stop-opacity="0.68"></stop>
                                    <stop offset="1" stop-color="#fff"></stop>
                                </linearGradient>
                                <linearGradient id="linear-gradient-4" x1="407.95" y1="-156.73" x2="386.54" y2="234.44"
                                                gradientUnits="userSpaceOnUse">
                                    <stop offset="0.02" stop-color="#fff" stop-opacity="0"></stop>
                                    <stop offset="0.32" stop-color="#fff" stop-opacity="0.39"></stop>
                                    <stop offset="0.68" stop-color="#fff" stop-opacity="0.68"></stop>
                                    <stop offset="1" stop-color="#fff"></stop>
                                </linearGradient>
                                <linearGradient id="linear-gradient-5" x1="103.67" y1="-212.38" x2="82.26" y2="178.79"
                                                xlink:href="#linear-gradient-4"></linearGradient>
                                <linearGradient id="linear-gradient-6" x1="82.16" y1="-101.12" x2="60.75" y2="290.05"
                                                xlink:href="#linear-gradient-4"></linearGradient>
                                <linearGradient id="linear-gradient-7" x1="102.25" y1="229.93" x2="137.02" y2="229.93"
                                                gradientUnits="userSpaceOnUse">
                                    <stop offset="0" stop-color="#e5c5d5"></stop>
                                    <stop offset="0.42" stop-color="#ead4d1"></stop>
                                    <stop offset="1" stop-color="#f0e9cb"></stop>
                                </linearGradient>
                                <linearGradient id="linear-gradient-8" x1="249.6" y1="237.4" x2="314.18" y2="237.4"
                                                xlink:href="#linear-gradient-7"></linearGradient>
                                <linearGradient id="linear-gradient-9" x1="278.92" y1="165.56" x2="317.94" y2="219.5"
                                                xlink:href="#linear-gradient-4"></linearGradient>
                            </defs>
                            <title>Analyze Report 3</title>
                            <path
                                d="M441.83,224.79c-7.62,14.36-21.42,25.57-25.25,41.38-1.65,6.82-1.27,14-2.12,20.95-3,24.45-21.33,44.83-43.18,56.38-.92.5-1.85,1-2.77,1.42-14.35,7-29.88,10.82-45.72,13.21-9.63,1.43-19.37,2.34-29,3.11Q233.48,366,173,364.71c-19.48-.4-39.35-1.32-57.67-7.79-.94-.32-1.87-.67-2.8-1-14.86-5.77-28.06-15.25-39.74-26.1l-.54-.5c-17.42-16.28-31.83-36-41.14-57.91a151.17,151.17,0,0,1-6.55-99.11c5.51-19.52,15.13-38.14,16.62-58.36,1.12-15.2-2.46-30.6-.08-45.65C45.78,38.37,73.56,16.36,102.9,9S163.11,5.77,193.07,10c14.63,2.09,31.76,7.67,46.25,3.2C257.13,7.72,272.1.89,291.32.85c7.84,0,15.83.82,23,4,8.7,3.8,15.6,10.7,22.67,17,19.73,17.68,42.23,32,62.39,49.2s38.44,38.09,45.86,63.52c3.63,12.43,4.52,25.5,4.91,38.44C450.7,190.69,450.13,209.17,441.83,224.79Z"
                                transform="translate(-19.06 -0.85)" fill="#4196f4" opacity="0.18"
                                style="isolation: isolate;"></path>
                            <rect x="100.31" y="117.77" width="236.31" height="168.3" rx="15.9" fill="#4196f4"></rect>
                            <path
                                d="M132,220.32c-2.43,1.74-5.65,2-8.2,3.51a13.74,13.74,0,0,0-5.2,6.85c-2.38,5.87-2.73,12.35-2.7,18.68,0,6.69-.1,14.14,1.44,20.68.42,1.8,3.22,9.71,5.94,9.41,1.72-.19,3.2-31.89,3.84-36s1.36-8,2.21-12C129.76,229.47,130.42,221.46,132,220.32Z"
                                transform="translate(-19.06 -0.85)" fill="url(#linear-gradient)"></path>
                            <rect x="114.74" y="129.79" width="207.46" height="140.83" fill="#fff"></rect>
                            <path
                                d="M269.76,275.41c.14-3,.76-6.49-1.31-8.68A12.71,12.71,0,0,0,265,264.6a15,15,0,0,1-7.65-11.43c-.26-2.55.15-5.13,0-7.7-.23-5.24-2.63-10.14-5.42-14.59s-6-8.64-8.26-13.39c-.47-1-.79-2.41.12-3s2.14.24,2.94,1C255.4,224.4,265,232.63,276,238.34c3.4,1.77,6.95,3.29,10.1,5.47,5.24,3.64,9.14,9,12,14.68s4.69,11.87,6.54,18c.68,2.24,1.35,4.68.56,6.88a3,3,0,0,1-1.24,1.66,4.09,4.09,0,0,1-1.84.4c-8,.44-16.07.45-24.12.55-2,0-4.37.47-6-.94C269.7,283,269.63,278.14,269.76,275.41Z"
                                transform="translate(-19.06 -0.85)" fill="url(#linear-gradient-2)"></path>
                            <rect x="140.16" y="155.33" width="6.18" height="56.56" fill="#4196f4"></rect>
                            <rect x="150.92" y="164.58" width="6.18" height="47.31" fill="#4196f4"></rect>
                            <rect x="161.45" y="173.02" width="6.18" height="38.86" fill="#4196f4"></rect>
                            <rect x="172.21" y="164.58" width="6.18" height="47.31" fill="#4196f4"></rect>
                            <rect x="182.75" y="183.6" width="6.18" height="28.28" fill="#4196f4"></rect>
                            <rect x="193.51" y="164.58" width="6.18" height="47.31" fill="#4196f4"></rect>
                            <rect x="204.04" y="178.78" width="6.18" height="33.11" fill="#4196f4"></rect>
                            <rect x="214.8" y="172.41" width="6.18" height="39.48" fill="#4196f4"></rect>
                            <rect x="137.41" y="229.75" width="35.38" height="2.06" fill="#4196f4"></rect>
                            <rect x="137.41" y="235.47" width="35.38" height="2.06" fill="#4196f4"></rect>
                            <rect x="137.41" y="241.19" width="35.38" height="2.06" fill="#4196f4"></rect>
                            <rect x="137.41" y="246.92" width="35.38" height="2.06" fill="#4196f4"></rect>
                            <rect x="137.41" y="252.64" width="35.38" height="2.06" fill="#4196f4"></rect>
                            <rect x="185.49" y="229.75" width="35.38" height="25.42" fill="none"></rect>
                            <path
                                d="M283.73,152.46a23,23,0,0,0-.14,46v-8h-.09a15.23,15.23,0,1,1,15.22-15.23,14.25,14.25,0,0,1-.16,2.18h8.09q.09-1,.09-1.95A23,23,0,0,0,283.73,152.46Z"
                                transform="translate(-19.06 -0.85)" fill="#4196f4"></path>
                            <rect x="291.74" y="77.24" width="73.28" height="71.9" rx="7.78"
                                  fill="url(#linear-gradient-3)"></rect>
                            <rect x="350.82" y="181.66" width="73.28" height="71.9" rx="7.78"
                                  fill="url(#linear-gradient-4)"></rect>
                            <rect x="52" y="26.41" width="73.28" height="71.9" rx="7.78"
                                  fill="url(#linear-gradient-5)"></rect>
                            <rect x="30.68" y="134.2" width="73.28" height="71.9" rx="7.78"
                                  fill="url(#linear-gradient-6)"></rect>
                            <path
                                d="M129.14,209.48a6.82,6.82,0,0,1,4.66-.81A4.91,4.91,0,0,1,137,213a10.68,10.68,0,0,1-1.21,5.46c-2.92,6.36-8.18,11.38-11.43,17.57a31.64,31.64,0,0,0-3.54,12.42c-.32,4.52-.17,10-4.09,12.31-2.78,1.59-6.51.51-8.77-1.77s-3.35-5.45-4.1-8.56a59.82,59.82,0,0,1,10.93-50.26c.85-1.09,2.3-2.24,3.45-1.47a2.82,2.82,0,0,1,.92,2.18c.24,2.38-.92,11.1,1.13,12.66C122.54,215.19,126.69,210.64,129.14,209.48Z"
                                transform="translate(-19.06 -0.85)" fill="url(#linear-gradient-7)"></path>
                            <path
                                d="M116.15,349.76l1.69-13.5c-.85,6.8-1.68,13.6-2.53,20.41l0,.25c-.94-.32-1.87-.67-2.8-1-14.86-5.77-28.06-15.25-39.74-26.1l-.54-.5c2.48-10.18,5.32-20.29,8.16-30.36,4.48-15.91,8-34.17,18.68-46.77,1.73-2,5-1.4,7.52-.5s5.26,2,7.84,3a9.41,9.41,0,0,1,4.28,2.86c1.07,1.5,1.19,3.45,1.26,5.3A518.41,518.41,0,0,1,116.15,349.76Z"
                                transform="translate(-19.06 -0.85)" fill="#4196f4"></path>
                            <path
                                d="M371.28,343.5c-.92.5-1.85,1-2.77,1.42-14.35,7-29.88,10.82-45.72,13.21-8.55-18.36-17.53-37.68-29.44-53.89-4-5.44-8.08-10.13-10.56-16.52-1.86-4.78-4.53-11-5-16.07-.45-5.43,3.49-8.2,7.42-11.37A80.89,80.89,0,0,1,315.38,245a4.34,4.34,0,0,1,2.95-.07,4.55,4.55,0,0,1,1.85,2.13L351,303.36c6.81,12.43,13.63,24.88,19.31,37.87C370.63,342,371,342.74,371.28,343.5Z"
                                transform="translate(-19.06 -0.85)" fill="#4196f4"></path>
                            <path
                                d="M264.69,256.41c-2.38-4.19-.77-9.42-1.05-14.24-.48-8-6.19-14.54-10.6-21.24-1.93-2.92-3.7-6.23-3.41-9.72.1-1.25.74-2.71,2-2.83a2.92,2.92,0,0,1,1.61.44,19,19,0,0,1,5.26,4c1.75,1.89,3.64,4.37,6.2,4.07a8.48,8.48,0,0,0,2.91-1.24c3.39-1.82,7.27-2.43,11.07-3l4.84-.75c3.93-.61,8-1.21,11.85-.38A16.57,16.57,0,0,1,306,219.22c3.4,5.78,3,13,5,19.37.8,2.5,2,4.88,2.65,7.42a10.58,10.58,0,0,1-.44,7.68c-1.54,2.87-4.84,4.34-8,5.05s-6.52.87-9.53,2.12c-2.55,1.05-4.74,2.81-7.14,4.15-5.61,3.13-7.74.42-12.84-1.73C271.75,261.62,267,260.4,264.69,256.41Z"
                                transform="translate(-19.06 -0.85)" fill="url(#linear-gradient-8)"></path>
                            <polygon
                                points="254.95 157.87 254.13 157.66 267.77 105.23 292.37 105.23 292.37 106.08 268.43 106.08 254.95 157.87"
                                fill="#4196f4"></polygon>
                            <polygon
                                points="350.19 226.48 300.93 226.48 277.49 185.82 278.22 185.39 301.42 225.63 350.19 225.63 350.19 226.48"
                                fill="#4196f4"></polygon>
                            <polygon
                                points="171.81 164.71 144.78 79.91 123.67 79.91 123.67 79.06 145.39 79.06 145.49 79.36 172.62 164.45 171.81 164.71"
                                fill="#4196f4"></polygon>
                            <polygon
                                points="140.65 196.83 121.42 175.4 102.57 175.4 102.57 174.56 121.8 174.56 141.28 196.27 140.65 196.83"
                                fill="#4196f4"></polygon>
                            <path d="M306.65,177.42a23,23,0,0,1-22.92,21.06h-.14v-8a15.22,15.22,0,0,0,15-13.05Z"
                                  transform="translate(-19.06 -0.85)" fill="#4196f4"></path>
                            <path d="M306.65,177.42a23,23,0,0,1-22.92,21.06h-.14v-8a15.22,15.22,0,0,0,15-13.05Z"
                                  transform="translate(-19.06 -0.85)" fill="url(#linear-gradient-9)"></path>
                        </svg>
                    </div>
                </el-card>

            </el-col>
        </el-row>


    </div>
</template>

<script>
import Bread from "@/components/Bread/Bread";
import AddReportDialog from "@/views/NPMS/Report/ReportDialog/AddReportDialog";
import EditReportDialog from "@/views/NPMS/Report/ReportDialog/EditReportDialog";

export default {
    name: "Report",
    components: {EditReportDialog, AddReportDialog, Bread},

    props: [],
    data() {
        return {

            currentPage: 1,
            pagesize: 4,
            addReportDialogVisible: false,
            editReportDialogVisible: false,

            //查询的表单
            reportForm: {
                datetime: []
            },
            reportSearch: {
                "marketDept": null,
                "customerMgrId": null,
                "week": null,
                "dateFrom": null,
                "dateTo": null
            },
            reportRules: {},

            tableData: [],
            user: null

        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
        this.$axios.post("/report/report/searchReport", this.reportSearch).then(
            e => {
                console.log("return message is ")
                console.log(e)
                if (e.data.status === 200) {
                    this.tableData = e.data.obj
                }
            }
        )
        this.$axios.get("/user/currentUser").then(
            e => {
                console.log("user is")
                console.log(e)
                let user = e.data.data
                this.user = user
            }
        )
    },
    methods: {

        // handleSizeChange(val) {
        //     this.pagesize = val;
        //     console.log(`每页 ${val} 条`);
        // },
        // handleCurrentChange(val) {
        //     this.currentPage = val;
        //     console.log(`当前页: ${val}`);
        // },
        submitSearch() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                console.log(this.reportForm)
                if (this.reportForm.datetime.length === 2) {
                    this.reportSearch.dateFrom = this.reportForm.datetime[0]
                    this.reportSearch.dateTo = this.reportForm.datetime[1]
                } else {
                    this.reportSearch.dateFrom = null
                    this.reportSearch.dateTo = null
                }

                console.log(this.reportSearch)
                this.$axios.post("/report/report/searchReport", this.reportSearch).then(
                    e => {
                        console.log("return message is ")
                        console.log(e)
                        if (e.data.status === 200) {
                            this.tableData = e.data.obj
                            this.$message.success(e.data.msg)
                        }
                    }
                )

            })
        },
        resetSearch() {
            this.reportForm.datetime = []
            this.reportSearch.dateTo = null
            this.reportSearch.dateFrom = null
        },

        //打开新增销售日报弹窗
        handleAdd() {
            console.log("add report")
            this.addReportDialogVisible = true
            this.$nextTick(() => {
                this.$refs.AddReportDialogRef.setData(this.user);
            })
        },

        //添加销售日报点击后回调函数
        addReportCallBack(report) {
            console.log("sdfsdf")
            console.log(report)


            this.tableData.push(report)
            console.log(report)
        },

        //修改销售日报点击后回调函数
        editReportCallBack(report, index) {

            this.tableData.splice(index, 1, report)
            console.log(report)
        },

        //修改，在dialog中显示选中行数据
        handleEdit(index, row) {

            const data = JSON.parse(JSON.stringify(row))

            this.$nextTick(() => {
                this.$refs.EditReportDialogRef.setData(data, index);
            })
            this.editReportDialogVisible = true;

            console.log(index, row);
        },


        //删除
        handleDelete(index, row) {
            this.$axios.post("/report/report/deleteReport/" + row.reportId).then(
                e => {
                    if (e.data.status === 200) {
                        this.$message.success(e.data.msg)
                    }
                }
            )
            console.log(index, row);
            this.tableData.splice(index, 1)
        },


        //关闭新增销售日报弹窗
        closeAddReportDialog() {
            this.addReportDialogVisible = false
        },


        //关闭新增销售日报弹窗
        closeEditReportDialog() {
            this.editReportDialogVisible = false
        },


    }


}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    border-radius: 25px 25px 25px 25px;
}

.form-card {

    border-radius: 15px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.table-card {
    margin-top: 20px;
    border-radius: 15px;
    height: 400px;
}
</style>